<template>
	<view class="contain">
		<view class="containBottomFirst">
			<view class="containBottomFirstCenter">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
			</view>
		</view>
		<view class="containBottomSecond">
			<view class="containBottomSecondBottom">
				<uni-icons type="up" size="30" @click="changeBottom" color="#fff" v-if="info === true"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getUserInfo,
		editUserInfo,
		editUserAvatar
	} from '@/api/my.js'
	import getImgUrl from '@/config/img.js'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'

	const userInfo = reactive({
		nickname: '', //用户名
		avatar: '', //用户头像
	})
	const info = ref(true)
	//获取用户信息
	onMounted(() => {
		// 在这里执行获取数据或初始化操作
		getUserInfo().then(res => {
			userInfo.avatar = res.data.avatar
			userInfo.nickname = res.data.nickname
		})
	});

	// 底部信息开关
	const changeBottom = () => {

		uni.chooseImage({
			count: 1,
			success: function(res) {
				userInfo.avatar = res.tempFilePaths[0]
				let uploadFilePath = userInfo.avatar
				// 图片上传
				uploadFile(uploadFilePath)
			},
			fail(err) {
				console.error('文件选择失败:', err)
			}
		})
	}
	// 头像更改
	const uploadFile = (filePath) => {
		uni.uploadFile({
			url: getImgUrl('api/front/user/userUpdatePhoto'),
			filePath: filePath,
			name: 'multipart',
			header: {
				'Authori-Zation': uni.getStorageSync('token')
			}
		}).then(res => {
			if (res.statusCode == 200) {
				uni.showToast({
					title: '更改头像成功',
					icon: 'success',
					duration: 2000
				})
			} else {
				uni.showToast({
					title: '操作失败',
					icon: 'error',
					duration: 2000
				})
			}

		})
	}
	const changeInfo = () => {
		info.value = true
	}
	//返回到上一页
	const goBack = () => {
		uni.redirectTo({
			url: '/pages/my/settings'
		});
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		background-color: #000;

		// 顶部文字
		.containTop {
			width: 100%;
			height: 150rpx;
			background-color: #000;
			display: flex;
			align-items: center;
		}

		// 中间图片
		.containBottomFirst {
			width: 100%;
			height: 700rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.containBottomFirstCenter {
				width: 90%;
				height: 90%;
				border-radius: 20rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.containBottomSecond {
			width: 100%;
			height: 350rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
	}
</style>